<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户注册</title>
    <link rel="icon" href="/image/favicon.ico" type="image/x-icon"/>
    <script src="/vue.min.js"></script>
    <script src="/axios.min.js"></script>
    <style>
        .register {
            border: rgb(255, 255, 255) solid 1px;
            height: 1000px;
            background-image: url('/image/登录页面背景.png');
            background-size: 100% 100%;
        }

        .register-page {
            opacity: 0.85;
            width: 500px;
            height: 650px;
            border: white soild 1px;
            background-color: rgb(247, 243, 243);
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        .user {
            margin-top: 7%;

        }

        .user label {
            margin-left: 8%;

        }

        .user input {
            position: absolute;
            width: 55%;
            height: 25px;
            background-color: white;
            border: rgb(233, 230, 230);
            left: 120px;
        }

        .user select {
            position: absolute;
            width: 20%;
            height: 25px;
            left: 120px;
            background-color: white;
            border: rgb(233, 230, 230);
        }

        #bt {

            display: flex;
            margin-left: 50px;
            width: 150px;
            height: 50px;
            background-color: white;
            /* 设置背景颜色 */
            color: rgb(17, 174, 168);
            /* 设置文字颜色 */
            font-size: 16px;
            border: 1px;
            /* 移除边框 */
            cursor: pointer;
            /* 将鼠标样式改为指针样式 */
            transition: all 0.3s ease;
            /* 添加过渡效果 */
        }

        #bt:hover {
            background-color: #aababa;
            /* 鼠标悬停时的背景颜色变化 */
        }

        .had {
            position: absolute;
            margin-top: 120px;
            margin-left: 310px;
        }
    </style>


</head>

<body>
    <div id="app">
        <div class="register">
            <div class="register-page">
                <h2 align="center">用户注册</h2>
                <form @submit.prevent="submitForm">

                    <div class="user">
                        <label>用户名</label>
                        <input type="text" v-model="susername" placeholder="请输入用户名"></input>
                        <p v-if="susernameError" style="color: red; text-align: center; margin-top: 5px;">
                            {{susernameError }}</p>
                    </div>

                    <div class="user">
                        <label>密码</label>
                        <input type="password" v-model="spassword" placeholder="请输入密码"></input>
                        <p v-if="spasswordError" style="color: red; text-align: center; margin-top: 5px;">
                            {{spasswordError }}</p>
                    </div>

                    <div class="user">
                        <label>确认密码</label>
                        <input type="password" v-model="spassword1" placeholder="请确认密码"></input>

                    </div>

                    <div class="user">
                        <label>姓名</label>
                        <input type="text" v-model="sname" placeholder="请输入您的姓名"></input>
                        <p v-if="snameError" style="color: red; text-align: center; margin-top: 5px;">
                            {{snameError }}</p>
                    </div>

                    <div class="user">
                        <label>电话</label>
                        <input type="text" v-model="sphone" placeholder="请输入您的电话"></input>
                        <p v-if="sphoneError" style="color: red; text-align: center; margin-top: 5px;">
                            {{sphoneError }}</p>
                    </div>

                    <div class="user">
                        <label>性别</label>
                        <select id="sex" v-model="sgender">
                            <option value="男">男</option>

                            <option value="女">女</option>
                        </select>

                    </div>

                    <div class="user">
                        <label>学历</label>
                        <select id="xueli" v-model="sedu">
                            <option value="1">小学</option>
                            <option value="2">初中</option>
                            <option value="3">高中</option>
                            <option value="4">大学</option>
                            <option value="5">研究生</option>
                            <option value="6">博士</option>
                        </select>

                    </div>

                    <div class="user">
                        <input type="submit" value="立即注册" id="bt"></input>
                    </div>



                </form>
                <div class="had">
                    <ul>
                        <a href="用户登录.html">已有账号 点击登录</a>
                    </ul>
                </div>

            </div>

        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                susername: '',
                susernameError: '',
                spassword: '',
                spasswordError: '',
                spassword1: '',
                sname: '',
                snameError: '',
                sphone: '',
                sphoneError: '',
                sgender: '',
                sedu: ''

            },

            methods: {

                checkUsername(susername) {
                    // 用户名至少6-10个字符,全为数字
                    const regex = /^\d{6,10}$/;
                    return regex.test(susername);
                },


                checkPassword(spassword) {
                    // 密码至少6-10个字符
                    const regex = /^[a-zA-Z\d]{6,10}$/;
                    return regex.test(spassword);
                },

                checkName(sname) {
                    // 名字只能为汉字
                    const regex = /^[\u4E00-\u9FA5]{2,10}(·[\u4E00-\u9FA5]{2,10}){0,2}$/;
                    return regex.test(sname);
                },

                checkPhone(sphone) {
                    // 电话只能是数字
                    const regex = /^\d{11}$/;
                    return regex.test(sphone);
                },

                submitForm() {

                    this.susernameError = '';
                    this.spasswordError = '';
                    this.snameError = '';
                    this.sphoneError = '';

                    if (!this.checkUsername(this.susername)) {
                        this.susernameError = '用户名不符合要求';

                    }

                    if (!this.checkPassword(this.spassword)) {
                        this.spasswordError = '密码不符合要求';
                    }

                    if (!this.checkName(this.sname)) {
                        this.snameError = '姓名不符合要求';

                    }

                    if (!this.checkPhone(this.sphone)) {
                        this.sphoneError = '电话不符合要求';
                        return;
                    }


                    if (this.spassword1 !== this.spassword) {
                        alert('请确保密码输入一致');
                        return;
                    }

                    // 检查所有错误信息是否为空
                    const errors = [this.susernameError, this.spasswordError, this.snameError, this.sphoneError];
                    const hasErrors = errors.some(error => error);

                    if (hasErrors) {
                        // 如果存在错误，则不继续提交表单
                        return;
                    }
                    let data = new FormData();
                    data.append("susername", this.susername);
                    data.append("spassword", this.spassword);
                    data.append("sname", this.sname);
                    data.append("sphone", this.sphone);
                    data.append("sgender", this.sgender);
                    data.append("sedu", this.sedu);
                    axios.post('http://localhost:8080/hqdx/seeker/register', data)
                        .then(response => {
                            console.log(response.data);
                            alert("注册成功")
                        })
                        .catch(error => {
                            console.log(error);
                        });


                }


            }

        })
    </script>
</body>

</html>